custom table component

面试要求实现table + pagination + search这些功能，先看一下思路。先不考虑nextjs的server components，都默认是client components。

思路

我不建议一上来就写代码。

Senior 的做法是先说设计思路。

第一步：确认是前端分页还是服务端分页

我会先问：

数据量大概是多少？是前端分页还是后端分页？

What's the approximate size of the data we are dealing with?

Should the pagination be handled on the frontend or the backend?

因为这是两个完全不同的实现。

前端分页

例如：

xxxxxxxxxx
const users = [
  ...
]

100 条数据已经全部拿到。

前端负责：

xxxxxxxxxx
search
filter
pagination

数据流：

xxxxxxxxxx
allData
   ↓
search
   ↓
filteredData
   ↓
pagination
   ↓
pageData

服务端分页

真实项目更常见：

xxxxxxxxxx
?page=1&pageSize=10&search=tom

后端返回：

xxxxxxxxxx
{
  "items": [],
  "total": 523
}

此时：

xxxxxxxxxx
search
pagination

都需要重新请求 API。

第二步：拆组件

不要全部写在一个组件。

我会这样拆：

xxxxxxxxxx
Page
 ├─ SearchInput
 ├─ Table
 └─ Pagination

职责：

xxxxxxxxxx
SearchInput
负责输入
​
Table
负责展示
​
Pagination
负责翻页
​
Page
负责状态管理

第三步：状态设计

如果是前端分页：

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const [currentPage, setCurrentPage] =
  useState(1);
​
const pageSize = 10;

只有两个状态：

xxxxxxxxxx
search
currentPage

不要存：

xxxxxxxxxx
const [filteredData, setFilteredData]

不要存：

xxxxxxxxxx
const [pageData, setPageData]

因为它们都是：

xxxxxxxxxx
derived state

可以计算出来。

第四步：数据流设计

先过滤：

xxxxxxxxxx
const filteredData = useMemo(() => {
  ...
}, [data, search]);

再分页：

xxxxxxxxxx
const pageData = useMemo(() => {
  ...
}, [filteredData, currentPage]);

面试时可以直接说：

xxxxxxxxxx
Search -> Filter -> Pagination

而不是：

xxxxxxxxxx
Pagination -> Search

因为用户希望：

xxxxxxxxxx
先搜索
再分页

例如：

xxxxxxxxxx
100条数据
​
搜索 john
​
得到 8 条
​
分页显示 8 条

而不是：

xxxxxxxxxx
第一页10条
​
再搜索
​
结果错误

第五步：搜索和分页联动

这里特别容易考。

当用户搜索：

xxxxxxxxxx
setSearch(value);

必须：

xxxxxxxxxx
setCurrentPage(1);

否则：

xxxxxxxxxx
当前在第 8 页
​
搜索后只剩 1 页
​
页面空白

这是经典 Bug。

面试官特别喜欢问。

第六步：Pagination 设计

我会这样设计：

xxxxxxxxxx
<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
/>

组件只负责：

xxxxxxxxxx
Previous
1
2
3
4
Next

不要让 Pagination 知道：

xxxxxxxxxx
search
table
api

第七步：性能优化

如果面试官继续追问：

数据量 5000 条怎么办？

我会回答：

xxxxxxxxxx
useMemo

避免每次 render 都重新 filter。

如果：

xxxxxxxxxx
50000+

我会说：

xxxxxxxxxx
服务端分页

或者：

xxxxxxxxxx
virtualization

例如：

• react-window
• TanStack Virtual

面试口语版（中文）

如果让我实现 Table、Search 和 Pagination，我会先确认是前端分页还是服务端分页。

对于前端分页，我会维护 search 和 currentPage 两个状态。数据流是先根据 search 过滤数据，再根据 currentPage 计算当前页的数据。

Table 只负责展示数据，Pagination 只负责切换页码，页面组件负责管理状态。

另外我会注意搜索时重置页码到第一页，避免搜索结果变少后出现空白页的问题。

如果数据量较大，我会使用 useMemo 优化过滤计算；如果数据量非常大，则考虑服务端分页或虚拟列表方案。

I would first clarify whether the requirement is client-side pagination or server-side pagination.

For client-side pagination, I would keep only two pieces of state: the search keyword and the current page. The data flow would be search filtering first, then pagination on the filtered result.

The Table component is responsible for rendering data, while the Pagination component only handles page navigation. State management stays in the parent component.

I would also reset the page number to page one whenever the search keyword changes to avoid empty pages.

For larger datasets, I would use memoization to optimize filtering, and for very large datasets I would switch to server-side pagination or list virtualization.

实现client side pagination

如果是面试手写，我会遵循一个原则：

xxxxxxxxxx
先能跑
再优化
最后组件拆分

很多候选人一上来就写：

xxxxxxxxxx
SearchInput
Table
Pagination
hooks
utils

结果 40 分钟过去了还没跑起来。

面试时更推荐：

xxxxxxxxxx
一个组件先实现功能
↓
再拆组件
↓
再优化

第一步：定义数据

假设有这样的数据：

xxxxxxxxxx
const users = [
  { id: 1, name: "Tom", email: "tom@test.com" },
  { id: 2, name: "Jerry", email: "jerry@test.com" },
  { id: 3, name: "Alice", email: "alice@test.com" },
  ...
];

第二步：状态

只存真正需要的状态

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const [currentPage, setCurrentPage] =
  useState(1);
​
const pageSize = 5;

不要存：

xxxxxxxxxx
filteredData
pageData

因为都能计算出来。

第三步：过滤数据

xxxxxxxxxx
const filteredData = useMemo(() => {
  return users.filter((user) =>
    user.name
      .toLowerCase()
      .includes(search.toLowerCase())
  );
}, [search]);

第四步：计算总页数

xxxxxxxxxx
const totalPages = Math.ceil(
  filteredData.length / pageSize
);

第五步：计算当前页数据

xxxxxxxxxx
const pageData = useMemo(() => {
  const start =
    (currentPage - 1) * pageSize;
​
  return filteredData.slice(
    start,
    start + pageSize
  );
}, [filteredData, currentPage]);

第六步：搜索时重置页码

这是面试高频坑。

xxxxxxxxxx
function handleSearch(
  e: React.ChangeEvent<HTMLInputElement>
) {
  setSearch(e.target.value);
​
  setCurrentPage(1);
}

第七步：完整实现

xxxxxxxxxx
"use client";
​
import { useMemo, useState } from "react";
​
const users = [
  { id: 1, name: "Tom", email: "tom@test.com" },
  { id: 2, name: "Jerry", email: "jerry@test.com" },
  { id: 3, name: "Alice", email: "alice@test.com" },
  { id: 4, name: "Bob", email: "bob@test.com" },
  { id: 5, name: "John", email: "john@test.com" },
  { id: 6, name: "Emma", email: "emma@test.com" },
  { id: 7, name: "Mike", email: "mike@test.com" },
  { id: 8, name: "Sarah", email: "sarah@test.com" },
  { id: 9, name: "Chris", email: "chris@test.com" },
  { id: 10, name: "Kevin", email: "kevin@test.com" },
  { id: 11, name: "David", email: "david@test.com" },
];
​
export default function UserTable() {
  const [search, setSearch] = useState("");
​
  const [currentPage, setCurrentPage] =
    useState(1);
​
  const pageSize = 5;
​
  const filteredData = useMemo(() => {
    return users.filter((user) =>
      user.name
        .toLowerCase()
        .includes(search.toLowerCase())
    );
  }, [search]);
​
  const totalPages = Math.ceil(
    filteredData.length / pageSize
  );
​
  const pageData = useMemo(() => {
    const start =
      (currentPage - 1) * pageSize;
​
    return filteredData.slice(
      start,
      start + pageSize
    );
  }, [filteredData, currentPage]);
​
  function handleSearch(
    e: React.ChangeEvent<HTMLInputElement>
  ) {
    setSearch(e.target.value);
​
    setCurrentPage(1);
  }
​
  return (
    <div className="space-y-4 p-6">
      <input
        type="text"
        placeholder="Search users..."
        value={search}
        onChange={handleSearch}
        className="
          w-full
          rounded
          border
          px-3
          py-2
        "
      />
​
      <table
        className="
          w-full
          border-collapse
          border
        "
      >
        <thead>
          <tr>
            <th className="border p-2">ID</th>
            <th className="border p-2">Name</th>
            <th className="border p-2">Email</th>
          </tr>
        </thead>
​
        <tbody>
          {pageData.map((user) => (
            <tr key={user.id}>
              <td className="border p-2">
                {user.id}
              </td>
​
              <td className="border p-2">
                {user.name}
              </td>
​
              <td className="border p-2">
                {user.email}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
​
      <div className="flex gap-2">
        <button
          disabled={currentPage === 1}
          onClick={() =>
            setCurrentPage((p) => p - 1)
          }
        >
          Prev
        </button>
​
        <span>
          {currentPage} / {totalPages}
        </span>
​
        <button
          disabled={
            currentPage === totalPages
          }
          onClick={() =>
            setCurrentPage((p) => p + 1)
          }
        >
          Next
        </button>
      </div>
    </div>
  );
}

CSS重点

我看到th和td上面，都设置了border，但是实际效果却border没有累加，还是1px，为什么？

这是因为table上加了border-collapse的样式，等于下面这个样式：

xxxxxxxxxx
table {
    border-collapse: collapse;    
}

开启后，相邻单元格的边框不会叠加，浏览器只保留一条边框。

这个真的好用，我之前很多样式问题都能靠这个来解决。

优化

搜索需要加上防抖。

方案一：Debounced State（面试最喜欢）

维护两个状态：

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const [debouncedSearch, setDebouncedSearch] =
  useState("");

监听 search：

xxxxxxxxxx
useEffect(() => {
  const timer = setTimeout(() => {
    setDebouncedSearch(search);
  }, 300);
​
  return () => {
    clearTimeout(timer);
  };
}, [search]);

过滤时，从监听search改为监听debouncedSearch：

xxxxxxxxxx
const filteredData = useMemo(() => {
  return users.filter((user) =>
    user.name
      .toLowerCase()
      .includes(
        debouncedSearch.toLowerCase()
      )
  );
}, [users, debouncedSearch]);

输入框内容不变：

xxxxxxxxxx
<input
  value={search}
  onChange={handleSearch}
/>

执行过程：

xxxxxxxxxx
输入:
r
re
rea
reac
react
​
search:
连续更新
​
debouncedSearch:
300ms后只更新一次
​
filter:
只执行一次

封装成 Hook（生产环境）

很多团队会写：

xxxxxxxxxx
function useDebounce<T>(
  value: T,
  delay = 300
) {
  const [debouncedValue, setDebouncedValue] =
    useState(value);
​
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
​
    return () => clearTimeout(timer);
  }, [value, delay]);
​
  return debouncedValue;
}

使用：

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const debouncedSearch =
  useDebounce(search, 300);

过滤：

xxxxxxxxxx
const filteredData = useMemo(() => {
  return users.filter((user) =>
    user.name
      .toLowerCase()
      .includes(
        debouncedSearch.toLowerCase()
      )
  );
}, [users, debouncedSearch]);

React 18/19 更现代的方案

其实对于 Client Side Search，很多时候根本不需要 Debounce。

可以使用：

xxxxxxxxxx
const deferredSearch =
  useDeferredValue(search);

过滤：

xxxxxxxxxx
const filteredData = useMemo(() => {
  return users.filter((user) =>
    user.name
      .toLowerCase()
      .includes(
        deferredSearch.toLowerCase()
      )
  );
}, [users, deferredSearch]);

区别：

Debounce

xxxxxxxxxx
用户停止输入300ms
才开始搜索

useDeferredValue

xxxxxxxxxx
立即更新输入框
​
搜索延后执行

用户体验通常更好。

对于 Client Side Search，如果过滤逻辑比较重，我会使用 Debounce 或 useDeferredValue 减少不必要的计算。对于 Server Side Search，我通常会结合 Debounce，避免用户输入过程中频繁发送网络请求。

English：

For client-side filtering, I usually use debounce or useDeferredValue when the filtering operation is expensive. For server-side search, I typically debounce the input to avoid sending unnecessary API requests while the user is still typing.

client side pagination 追问

通常下一步会问：

如果让我把 Table 抽成一个可复用组件呢？

这时候就可以开始第二阶段：

xxxxxxxxxx
<Table<T>>
<Pagination />
<SearchInput />

甚至做成：

xxxxxxxxxx
<DataTable
  data={users}
  columns={columns}
/>

这种类似于 TanStack Table 的设计。这个也是中高级 React 面试特别爱考的一步。

很好，这其实就是从：

xxxxxxxxxx
能写业务
↓
能设计组件

的分水岭了。

很多中级工程师能写出：

xxxxxxxxxx
<UserTable />

但是高级工程师会开始思考：

xxxxxxxxxx
如果以后有：
UsersTable
ProductsTable
OrdersTable
CategoriesTable
​
怎么办？

总不能复制 4 份 Table 吧。

第一步：抽象 Table

我们先看哪些东西会变化。

xxxxxxxxxx
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
​
  <tbody>
    {users.map(...) }
  </tbody>
</table>

变化的是：

xxxxxxxxxx
columns
data

固定的是：

xxxxxxxxxx
table结构
thead
tbody
tr
td

所以我们抽：

xxxxxxxxxx
<Table
  data={users}
  columns={columns}
/>

第二步：设计 Columns

这是最经典的设计。

xxxxxxxxxx
const columns = [
  {
    key: "id",
    title: "ID",
  },
  {
    key: "name",
    title: "Name",
  },
  {
    key: "email",
    title: "Email",
  },
];

然后 Table 自动渲染：

xxxxxxxxxx
<thead>
  <tr>
    {columns.map(...) }
  </tr>
</thead>

第三步：支持自定义 Cell

面试官一定会问：

如果状态字段需要显示 Tag 怎么办？

例如：

xxxxxxxxxx
{
  id: 1,
  name: "Tom",
  status: "active"
}

不能直接：

xxxxxxxxxx
<td>{row.status}</td>

要支持：

xxxxxxxxxx
const columns = [
  {
    key: "status",
    title: "Status",
    render: (value) => (
      <Badge>{value}</Badge>
    ),
  },
];

类似：

xxxxxxxxxx
TanStack Table
Ant Design Table

的设计。

第四步：TypeScript 泛型

这是高级面试必问。

定义：

xxxxxxxxxx
type Column<T> = {
  key: keyof T;
  title: string;
  render?: (
    value: T[keyof T],
    row: T
  ) => React.ReactNode;
};

keyof T：这是 TypeScript 的索引类型查询操作符，它会提取出类型 T 所有属性名（键）组成的联合类型。

• 作用：强制要求这一列对应的字段名，必须是数据源对象中真实存在的属性。防止手误拼错字段名。

value: T[keyof T]：当前单元格的值（对应字段的数据类型）。

row: T：当前行完整的数据对象，方便你根据同一行里的其他字段来决定怎么渲染当前单元格。

Table：

xxxxxxxxxx
type TableProps<T> = {
  data: T[];
  columns: Column<T>[];
};

组件：

xxxxxxxxxx
export function Table<T>({
  data,
  columns,
}: TableProps<T>) {
  ...
}

这样：

xxxxxxxxxx
<Table<User>
  data={users}
  columns={columns}
/>

自动推导类型。

注意：

render是一个函数，所以当有render时，直接执行即可。

xxxxxxxxxx
type Column<T> = {
  key: keyof T;
  title: string;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
};
​
type TableProps<T> = {
  data: T[];
  columns: Column<T>[];
};
​
export default function CustomTable<T>({ data, columns }: TableProps<T>) {
  return (
    <table className="w-full border-collapse border">
      <thead>
        <tr>
          {columns.map((col) => (
            <th className="border p-2" key={String(col.key)}>
              {col.title}
            </th>
          ))}
        </tr>
      </thead>
​
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map((col) => {
              const value = row[col.key];
​
              return (
                <td key={String(col.key)} className="border p-2">
                  {col.render ? col.render(value, row) : String(value)}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

这里的CustomTable组件，我使用的时候，需要传递T类型过来吗？

1. 自动推导（最常用、最省心 ⭐️⭐️⭐️）

当你把带有明确类型定义的 data 数组赋值给 CustomTable 的 data 属性时，TypeScript 会顺藤摸瓜，自动把 data 数组中元素的类型当做 T 传递进去。

2. 显式手动传递（当你想强制约束时 ⭐️⭐️）

有时候你的 data 可能是从后端接口异步拿到的，初始值是个空数组 []，此时 TS 无法自动推导出 T 的类型。你就需要像调用泛型函数一样，在 JSX 标签上显式地写出 <User>。

• 语法：<组件名<类型> ... />

xxxxxxxxxx
// 💡 显式将 User 作为 T 传递进去
<CustomTable<User> 
    data={loadingData} 
    columns={[
        {
            key: "name", // ✨ 这里会享受到完备的 User 属性提示
            title: "姓名",
            // render 里的 value 也会被精准识别为 string，row 被识别为 User
            render: (value, row) => <span>{value} ({row.age})</span>
        }
            ]} 
    />

第五步：Pagination 抽出来

刚刚我们写：

xxxxxxxxxx
<div>
  Prev
  1 / 10
  Next
</div>

抽成：

xxxxxxxxxx
<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
/>

职责：

xxxxxxxxxx
Pagination
只负责页码
​
不负责数据

这是组件设计原则：

xxxxxxxxxx
单一职责

xxxxxxxxxx
type PaginationProps = {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
};
​
export default function Pagination({
  currentPage,
  totalPages,
  onPageChange,
}: PaginationProps) {
  return (
    <div className="flex items-center gap-4">
      <button
        disabled={currentPage === 1}
        onClick={() => onPageChange(currentPage - 1)}>
        Previous
      </button>
      <span>
        {currentPage} / {totalPages}
      </span>
      <button
        disabled={currentPage === totalPages}
        onClick={() => onPageChange(currentPage + 1)}>
        Next
      </button>
    </div>
  );
}

第六步：SearchInput 抽出来

xxxxxxxxxx
<SearchInput
  value={search}
  onChange={setSearch}
/>

这样：

xxxxxxxxxx
SearchInput
Table
Pagination

全部可复用。

xxxxxxxxxx
type SearchInputProps = {
  value: string;
  onChange: (value: string) => void;
};
​
export default function SearchInput({ value, onChange }: SearchInputProps) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Search..."
      className="border py-2 px-4"
    />
  );
}
​

第七步：父组件组合

最终：

xxxxxxxxxx
<UserPage>

内部：

xxxxxxxxxx
<SearchInput />
​
<Table />
​
<Pagination />

状态全部在页面层。lift state up.

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const [currentPage, setCurrentPage] =
  useState(1);

数据流：

xxxxxxxxxx
search
    ↓
filteredData
    ↓
pageData
    ↓
Table

xxxxxxxxxx
"use client";
​
import { useMemo, useState } from "react";
import Pagination from "../components/client-side/table/pagination";
import CustomTable, {
  type Column,
} from "../components/client-side/table/table";
import SearchInput from "../components/client-side/table/search-input";
​
const PAGE_SIZE = 10;
​
interface User {
  id: number;
  name: string;
  email: string;
  gender: string;
  country: string;
}
​
const users: User[] = [
  {
    id: 1,
    name: "Vail",
    email: "vcleminson0@i2i.jp",
    gender: "Male",
    country: "Brazil",
  },
  {
    id: 2,
    name: "Mylo",
    email: "mhollyman1@soup.io",
    gender: "Male",
    country: "Portugal",
  },
  ......
];
​
export default function ClientPage() {
  const [search, setSearch] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
​
  const filteredUsers = useMemo(() => {
    return users.filter((user) =>
      user.name.toLowerCase().includes(search.toLowerCase()),
    );
  }, [search]);
​
  const totalPages = Math.ceil(filteredUsers.length / PAGE_SIZE);
​
  const pageData = useMemo(() => {
    const start = (currentPage - 1) * PAGE_SIZE;
    return filteredUsers.slice(start, start + PAGE_SIZE);
  }, [filteredUsers, currentPage]);
​
  const handleSearch = (value: string) => {
    setSearch(value);
    setCurrentPage(1);
  };
​
  const columns: Column<User>[] = [
    {
      key: "id",
      title: "Id",
    },
    {
      key: "name",
      title: "Name",
    },
    {
      key: "email",
      title: "Email",
    },
    {
      key: "gender",
      title: "Gender",
      render: (value) => (
        <span
          className={value === "Male" ? "text-orange-900" : "text-pink-500"}>
          {value}
        </span>
      ),
    },
    {
      key: "country",
      title: "Country",
    },
  ];
​
  return (
    <div className="space-y-4 p-4">
      <SearchInput value={search} onChange={handleSearch} />
​
      <CustomTable data={pageData} columns={columns} />
​
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

效果：

面试官追问：还能继续优化吗？

这里才是真正的高级题。

你可以说：

方案1：抽 Hook

xxxxxxxxxx
const {
  pageData,
  currentPage,
  totalPages,
} = usePagination(...)

我会让 Hook 只负责分页状态和分页计算，不负责搜索和排序。Hook 接收数据和 pageSize，返回当前页数据、总页数以及分页操作方法。这样搜索、排序、过滤都可以在外部完成，分页 Hook 保持单一职责，也更容易复用。

xxxxxxxxxx
import { useEffect, useMemo, useState } from "react";
​
export default function usePagination<T>(data: T[], pageSize: number) {
  const [currentPage, setCurrentPage] = useState(1);
​
  const totalPages = Math.max(Math.ceil(data.length / pageSize), 1);
​
  // 避免搜索后，currentPage > totalPages的情况，强行固定到totalPages，也就是最后一页。或者这里可以固定到第一页。
  useEffect(() => {
    if (currentPage > totalPages) {
      setCurrentPage(totalPages);
    }
  }, [currentPage, totalPages]);
​
  const pageData = useMemo(() => {
    const start = (currentPage - 1) * pageSize;
​
    return data.slice(start, start + pageSize);
  }, [data, currentPage, pageSize]);
​
  return {
    currentPage,
    totalPages,
    pageData,
    setCurrentPage,
  };
}

方案2：DataTable

进一步组合：

xxxxxxxxxx
<DataTable
  data={users}
  columns={columns}
/>

内部直接包含：

xxxxxxxxxx
Search
Pagination
Table

类似 TanStack Table的设计思路。

Senior 面试口语版（中英双语）

如果只有一个表格，我会直接实现功能。但如果系统里有多个表格，例如用户、订单和商品列表，我会把 Table、Pagination 和 SearchInput 抽成独立组件。

Table 接收 data 和 columns，通过泛型保证类型安全。Pagination 只负责页码切换，不关心数据来源。SearchInput 只负责输入和事件通知。

页面组件负责状态管理和数据流控制，这样组件职责清晰，也更容易复用和测试。

If there is only one table, I would implement it directly. However, if the application contains multiple tables such as users, orders, and products, I would extract Table, Pagination, and SearchInput into reusable components.

The Table component would accept data and columns and use TypeScript generics for type safety. Pagination would only handle page navigation, while SearchInput would only manage user input.

The page component would own the state and control the data flow. This keeps responsibilities clear and makes the components easier to reuse and test.

client side pagination 追问

你刚刚设计的 Table，如何支持：

• Sorting
• Row Selection
• Column Visibility
• Server-side Pagination
• Server-side Search

并且不把 Table 组件搞成一个 2000 行的怪物组件？

这就是很多公司会考的 DataTable 架构设计题。

这一步就开始接近真正的 Senior 面试了。

因为现在的问题已经不是：

xxxxxxxxxx
怎么写 Table

而是：

xxxxxxxxxx
怎么设计一个长期可维护的 DataTable

初级工程师的写法

很多人会这样写：

xxxxxxxxxx
<DataTable
  data={data}
  columns={columns}
  searchable
  sortable
  selectable
  pagination
  rowExpandable
  columnVisibility
  stickyHeader
  ...
/>

然后内部：

xxxxxxxxxx
function DataTable() {
  // 2000行代码
​
  // search
  // sort
  // pagination
  // selection
  // expansion
  // visibility
  // virtualization
​
  return ...
}

最后变成：

xxxxxxxxxx
God Component
（上帝组件）

没人敢改。

Senior 的第一原则

不要把所有逻辑塞进 Table。

Table 应该只负责：

xxxxxxxxxx
Render

即：

xxxxxxxxxx
展示数据

而不是：

xxxxxxxxxx
搜索数据
排序数据
请求数据
缓存数据

架构分层

我一般会拆成：

xxxxxxxxxx
Page
 ↓
Data Layer
 ↓
Table UI Layer

例如：

xxxxxxxxxx
<UserPage />

负责：

xxxxxxxxxx
const [search, setSearch] = useState("");
​
const query = useUsers({
  search,
  page,
  sort,
});

然后：

xxxxxxxxxx
<DataTable
  data={query.data}
  columns={columns}
/>

Table 根本不知道：

xxxxxxxxxx
API
React Query
Search
Pagination

这些东西。

Sorting 怎么设计？

很多人的第一反应：

xxxxxxxxxx
<DataTable sortable />

然后内部：

xxxxxxxxxx
const [sort, setSort] = useState(...)

我一般不会这么做。

更推荐：

xxxxxxxxxx
const [sorting, setSorting] =
  useState<SortingState>([]);

然后：

xxxxxxxxxx
<DataTable
  sorting={sorting}
  onSortingChange={setSorting}
/>

这是 React 最经典的模式：

xxxxxxxxxx
Controlled Component

类似：

xxxxxxxxxx
<input
  value={value}
  onChange={setValue}
/>

为什么？

因为以后可能：

xxxxxxxxxx
URL同步
LocalStorage同步
Server同步

如果状态藏在 Table 里面：

xxxxxxxxxx
无法控制

Search 怎么设计？

同理：

不要：

xxxxxxxxxx
<DataTable
  searchable
/>

而是：

xxxxxxxxxx
<DataTableToolbar
  search={search}
  onSearchChange={setSearch}
/>

因为：

xxxxxxxxxx
Search 属于业务层
不是 Table 层

Server Pagination 怎么设计？

很多候选人会这样写：

xxxxxxxxxx
<DataTable
  fetchData={fetchUsers}
/>

我一般不喜欢。

因为：

xxxxxxxxxx
Table 开始负责 API

职责变重。

更推荐：

xxxxxxxxxx
const query = useUsers({
  page,
  pageSize,
});

然后：

xxxxxxxxxx
<DataTable
  data={query.items}
  total={query.total}
  page={page}
  onPageChange={setPage}
/>

这样：

xxxxxxxxxx
Data Fetching
和
Data Rendering
彻底分离

Row Selection

不要：

xxxxxxxxxx
<DataTable selectable />

内部自己存：

xxxxxxxxxx
selectedRows

而是：

xxxxxxxxxx
const [selectedRows, setSelectedRows] =
  useState({});

传进去：

xxxxxxxxxx
<DataTable
  rowSelection={selectedRows}
  onRowSelectionChange={
    setSelectedRows
  }
/>

和 TanStack Table 一模一样。

Column Visibility

不要：

xxxxxxxxxx
<DataTable
  hiddenColumns={...}
/>

而是：

xxxxxxxxxx
const [columnVisibility,
  setColumnVisibility] =
  useState({});

然后：

xxxxxxxxxx
<DataTable
  columnVisibility={
    columnVisibility
  }
  onColumnVisibilityChange={
    setColumnVisibility
  }
/>

你会发现什么？

所有高级功能：

xxxxxxxxxx
Sorting
Pagination
Search
Selection
Column Visibility

都遵循同一个模式：

xxxxxxxxxx
State Lift Up

即：

xxxxxxxxxx
状态在外部
​
Table 只消费状态

最终架构

我实际项目更喜欢：

xxxxxxxxxx
UserPage
│
├── DataTableToolbar
│      ├── Search
│      ├── Filters
│      └── Export
│
├── DataTable
│
└── Pagination

状态：

xxxxxxxxxx
const [search, setSearch] =
  useState("");
​
const [sorting, setSorting] =
  useState([]);
​
const [pagination, setPagination] =
  useState({
    pageIndex: 0,
    pageSize: 10,
});
​
const [rowSelection,
  setRowSelection] =
  useState({});

然后：

xxxxxxxxxx
<DataTable
  data={data}
  columns={columns}
  sorting={sorting}
  onSortingChange={setSorting}
  pagination={pagination}
  onPaginationChange={
    setPagination
  }
  rowSelection={rowSelection}
  onRowSelectionChange={
    setRowSelection
  }
/>

面试口语版（高级）

对于复杂表格，我不会把搜索、排序、分页和选择状态放在 Table 内部，而是采用受控组件模式，把状态提升到页面层管理。Table 只负责展示数据和触发事件。这样可以方便地与 URL、服务端查询、缓存以及权限系统集成，同时也能避免 Table 组件变成一个难以维护的大组件。

For complex tables, I prefer a controlled component approach. Instead of keeping sorting, pagination, filtering, and row selection state inside the table, I lift those states to the page level. The table is only responsible for rendering data and emitting events. This makes it easier to integrate with URLs, server-side queries, caching, and permission systems while keeping the table component maintainable and reusable.

实现server side pagination

当然可以，而且现在的 React + Next.js 项目里，Server Side Pagination（服务端分页）反而是主流方案。

如果面试官问：

你会实现 Server Side Pagination 吗？

你应该回答：

会。通常分页、搜索、排序条件都放在 URL 或状态中，然后将这些参数传递给后端 API，由数据库完成分页查询，只返回当前页的数据和总数。

最经典的流程

前端

xxxxxxxxxx
?page=2&pageSize=10

或者：

xxxxxxxxxx
?page=2
&pageSize=10
&search=react
&sort=name
&order=asc

API

xxxxxxxxxx
GET /api/users
?page=2
&pageSize=10
&search=react

后端

SQL：

xxxxxxxxxx
SELECT *
FROM users
LIMIT 10
OFFSET 10;

同时查询：

xxxxxxxxxx
SELECT COUNT(*)
FROM users;

返回

xxxxxxxxxx
{
  "items": [...],
  "total": 523
}

前端计算页数

xxxxxxxxxx
const totalPages = Math.ceil(
  total / pageSize
);

Next.js App Router 方案

这是目前比较高频的面试答案。

URL

xxxxxxxxxx
/users?page=3

page.tsx

xxxxxxxxxx
export default async function UsersPage({
  searchParams,
}: {
  searchParams: Promise<{
    page?: string;
  }>;
}) {
  const { page } = await searchParams;
​
  const currentPage =
    Number(page) || 1;
​
  const res = await fetch(
    `https://api.example.com/users?page=${currentPage}`
  );
​
  const data = await res.json();
​
  return (
    <UserTable
      users={data.items}
      total={data.total}
      page={currentPage}
    />
  );
}

这样：

xxxxxxxxxx
?page=1
?page=2
?page=3

都会触发新的 Server Render。

这是非常符合 Next.js 思维的。

Client Component 如何翻页？

xxxxxxxxxx
"use client";
​
const router = useRouter();
​
function onPageChange(page: number) {
  router.push(
    `/users?page=${page}`
  );
}

用户点击：

xxxxxxxxxx
Next

变成：

xxxxxxxxxx
/users?page=2

然后：

xxxxxxxxxx
Server Component
重新获取数据
重新渲染

面试官可能继续追问

为什么不用前端分页？

例如：

xxxxxxxxxx
一次拉 10000 条
前端 slice

缺点：

网络浪费

xxxxxxxxxx
10000条
↓
实际只展示10条

首屏变慢

xxxxxxxxxx
等待整个数据集返回

内存占用

xxxxxxxxxx
浏览器保存全部数据

搜索不准确

例如：

xxxxxxxxxx
第一页
react
​
第二页
nextjs

如果只在当前页搜索：

xxxxxxxxxx
找不到 nextjs